<template>
  <div class="main">
    <div class="event-log">
      <Event></Event>
      <Log></Log>
    </div>
    <div class="free">
      <div class="free-tab-wrap">
        <FreeTab :tab="freeTab" :freeContent="free.freeContent" :contentRight="free.freeContent.right" v-for="freeTab in free.freeTabs" :key="freeTab.name"></FreeTab>
      </div>

      <div class="free-content">
        <div class="free-content-left">
          <component :is="free.freeContent.left"></component>
        </div>
        <div class="free-content-dividing"></div>
        <div class="free-content-right">
          <component :is="free.freeContent.right"></component>
        </div>
      </div>
    </div>
    <MajorAttributet></MajorAttributet>
  </div>
</template>

<script>
import Event from '@/components/interface/Event.vue'
import Log from '@/components/interface/Log.vue'
import FreeTab from '@/components/interface/FreeTab.vue'
import FreeEmpty from '@/components/interface/FreeEmpty.vue'
import Bag from '@/components/interface/Bag.vue'
import CharacterAttribute from '@/components/interface/CharacterAttribute.vue'
import Equipment from '@/components/interface/Equipment.vue'
import MajorAttributet from '@/components/interface/MajorAttribute.vue'

export default {
  name: 'Main',

  components: {
    Event,
    Log,
    FreeTab,
    FreeEmpty,
    Bag,
    CharacterAttribute,
    Equipment,
    MajorAttributet
  },

  data() {
    return {
      free: {
        freeTabs: [
          {
            name: 'CharacterAttribute',
            label: '人物属性'
          },
          {
            name: 'Bag',
            label: '背包'
          },
          {
            name: 'Equipment',
            label: '装备'
          }
        ],
        freeContent: {
          left: 'CharacterAttribute',
          right: 'Bag'
        }
      }
    }
  },

  computed: {
    renderCount() {
      return this.$store.state.renderCount
    }
  },

  watch: {
    renderCount() {
      refreshData(this)
    },
  },

  mounted() {},
}

let refreshData = (that) => {
  that.free.freeContent.left = that.$game.data.state.interface.freeContent.left
  that.free.freeContent.right = that.$game.data.state.interface.freeContent.right
}
</script>

<style lang="scss">

</style>
